<template>
    <list @loadmore="onLoadmore" @scroll="onScrolls" show-scrollba="true">
        <header>
            <text class="banner">HEADER</text>
        </header>
       <cell class="warapper" v-for="num in lists" :key="num">
            <div class="panel">
                <text @appear="onAppear(num)" @disappear="onDisAppear(num)" class="text">{{num}}</text>
            </div>
       </cell>
    </list>
</template>
<script>
import { toast } from "../utils/config";
export default {
  data: {
    lists: ["A", "B", "C", "D", "E", "F"]
  },
  methods: {
    onLoadmore: function() {
      toast("触发 Loadmore 事件");
    },
    onScrolls: function() {
      toast("触发 onScrolls 事件");
    },
    onAppear: function(num) {
      toast(num + "onAppear");
    },
    onDisAppear: function(num) {
      toast(num + "onDisAppear");
    }
  }
};
</script>
<style scoped>
.warapper {
  justify-content: center;
  align-items: center;
}
.banner {
  width: 750px;
  padding: 25px;
  font-size: 50px;
  text-align: center;
  font-weight: bold;
  color: #41b883;
  background-color: rgb(162, 217, 192);
}
.panel {
  width: 600px;
  height: 300px;
  margin-top: 35px;
  margin-bottom: 35px;
  flex-direction: column;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(162, 217, 192);
  background-color: rgba(162, 217, 192, 0.2);
}
.text {
  text-align: center;
  font-size: 88px;
  color: #41b883;
}
</style>


